import React from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { BackHandler } from 'react-native'
import { connect } from 'react-redux'

import { createAppContainer, NavigationAction, NavigationActions } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import CalendarPage from './CalendarPage';
import PersonalPage from './PersonalPage';
import SchedulePage from './SchedulePage';
import TeamPage from './TeamPage';
import NavigationUtil from '../navigator/NavigationUtil';




class BasicTabBarExample extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }
  onBackPress = () => {
    const { dispatch, nav } = this.props
    console.log(nav)
    if (nav.routes[1].index === 0) {
      return false;
    }
    dispatch(NavigationActions.back());
    return true;
  }
  _contxtRouter() {
    return createBottomTabNavigator({
      SchedulePage: {
        screen: SchedulePage,
        navigationOptions: {
          tabBarLabel: '日程表',
          tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons name="ios-time" size={26} style={{ color: tintColor }} />
          ),
        },
      },
      CalendarPage: {
        screen: CalendarPage,
        navigationOptions: {
          tabBarLabel: '日历',
          tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons
              name="ios-calendar"
              size={26}
              style={{ color: tintColor }}
            />
          ),
        },
      },
      TeamPage: {
        screen: TeamPage,
        navigationOptions: {
          tabBarLabel: '团队',
          tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons name="ios-people" size={26} style={{ color: tintColor }} />
          ),
        },
      },
      PersonalPage: {
        screen: PersonalPage,
        navigationOptions: {
          tabBarLabel: '个人',
          tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons name="ios-person" size={26} style={{ color: tintColor }} />
          ),
        },
      },
    });
  }
  render() {
    NavigationUtil.navigation = this.props.navigation
    const TabNavigator = createAppContainer(this._contxtRouter());
    return <TabNavigator />;
  }
}
const mapStateToProps = state => ({
  nav: state.nav
})
export default connect(mapStateToProps)(BasicTabBarExample)
